<template>
	<view class="container">
		<view class="status-wrapper">
			<!-- 订单状态 0.待支付 1.待发货 2.待收货 3.待评价
			4交易关闭 5正在退款 6交易取消 7已退款 8正在退货 9已退货 10已完成 -->
			<view class="status" v-if="details.status == 0">待支付</view>
			<view class="status" v-if="details.status == 1">已支付</view>
			<view class="status" v-if="details.status == 2">待收货</view>
			<view class="status" v-if="details.status == 3">待评价</view>
			<view class="status" v-if="details.status == 4">交易关闭</view>
			<view class="status" v-if="details.status == 5">正在退款</view>
			<view class="status" v-if="details.status == 6">交易取消</view>
			<view class="status" v-if="details.status == 7">已退款</view>
			<view class="status" v-if="details.status == 8">正在退货</view>
			<view class="status" v-if="details.status == 9">已退货</view>
			<view class="status" v-if="details.status == 10">已完成 </view>
			<template v-if="details.type == 1 || details.type == 2 || details.type == 3 || details.type == 5">
				<view class="desc" v-if="details.status == 0">剩{{plusTime.m}}分{{plusTime.s}}秒自动关闭</view>
				<view class="desc" v-else>{{descList[details.status]}}</view>
			</template>
			<view class="desc" v-else>感谢您的购买</view>

		</view>
		<view class="address-wrapper" v-if="details.address">
			<view class="address">{{details.address}}</view>
			<view class="name-tel">{{details.name}} {{details.mobile}}</view>
			<view class="time-wrapper border-top" v-if="details.time">
				<view class="title">上门时间</view>
				<view class="time">{{details.time}}</view>
			</view>
		</view>
		<view class="product-wrapper">
			<view class="store-infor">
				<image src="/static/seller.png" class="icon"></image>
				<view class="name ell">{{details.shopName}}</view>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="product in details.items" :key="product.productId">
					<image :src="product.productImage" mode="aspectFill" class="img"></image>
					<view class="text">
						<view class="name ell">{{product.productName}}</view>
						<view class="specifications ell" v-if="product.normal">{{product.normal}}</view>
						<view class="num">x{{product.num}}</view>
					</view>
					<view class="price">¥{{product.price}}</view>
				</view>
			</view>
			<view class="total-amount border-top">小计 ¥{{details.totalFee}}</view>
		</view>
		<view class="order-infor-wrapper">
			<view class="title">订单信息</view>
			<view class="order-infor">
				<view class="infor-item border-bottom">
					<view class="titl">订单编号</view>
					<view class="con">{{details.orderNo}}</view>
					<view class="btn" @click="copy">复制</view>
				</view>
			
				<view class="infor-item border-bottom">
					<view class="titl">支付方式</view>
					<view class="con" v-if="details.payMethod == 1">余额支付</view>
					<view class="con" v-if="details.payMethod == 2">微信支付</view>
					<view class="con" v-if="details.payMethod == 3">支付宝支付</view>
				</view>
				<view class="infor-item border-bottom">
					<view class="titl">备注</view>
					<view class="con">{{details.memo}}</view>
				</view>
				<view class="infor-item border-bottom">
					<view class="titl">下单时间</view>
					<view class="con">{{details.createTime}}</view>
				</view>
				<template v-if="false">
					<view class="infor-item border-bottom">
						<view class="titl">申请时间</view>
						<view class="con">2021-03-23 23:10:33</view>
					</view>
					<view class="infor-item border-bottom">
						<view class="titl">售后类型</view>
						<view class="con">退货退款</view>
					</view>
					<view class="infor-item border-bottom">
						<view class="titl">退款金额</view>
						<view class="con">1200</view>
					</view>
					<view class="infor-item border-bottom">
						<view class="titl">退款原因</view>
						<view class="con">七天无理由退货</view>
					</view>
				</template>
			</view>
		</view>
		<view class="order-infor-wrapper"
			v-if="details.addressType==2 && details.express!=null && details.express!=undefined">
			<view class="title">针对店外订单</view>
			<view class="order-infor">
				<view class="infor-item border-bottom">
					<view class="titl">物流公司</view>
					<view class="con">{{details.express}}</view>
				</view>
				<view class="infor-item border-bottom">
					<view class="titl">发货单号</view>
					<view class="con">{{details.expressNo}}</view>
					<view class="btn" @click="copy1">复制</view>
				</view>
			</view>
			<view class="title">发货人信息</view>
			<view class="order-infor">
				<view class="infor-item border-bottom">
					<view class="titl">发货人</view>
					<view class="con">{{details.sendName}}</view>
				</view>
				<view class="infor-item border-bottom">
					<view class="titl">发货人手机号</view>
					<view class="con">{{details.sendMobile}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-menu" :style="{ paddingBottom: tabbarBottom + 'px' }">
			<template v-if="details.status == 0">
				<view class="btn on" @click.stop="togglePopup(details.id)" v-if="details.type!==5">立即付款</view>
				<view class="btn" @click.stop="handleCancelOrder(details.id)">取消订单</view>
			</template>
			<template v-if="details.status == 1">
				<view class="btn" v-if="details.type == 1 || details.type == 2" @click.stop="afterSales(details.id)">退款
				</view>
			</template>
			<template v-if="details.status == 2">
				<view class="btn on" @click.stop="handleConfirmGet(details.id)">确认收货</view>
			</template>
			<template v-if="details.status == 2 || details.status == 3  || details.status == 10">
				<view class="btn" v-if="details.type == 1 || details.type == 2" @click.stop="afterSales(details.id)">退货
				</view>
				<view class="btn on" v-if="details.type == 1 || details.type == 2"
					@click.stop="expressInfo(details.expressNo)">查看物流</view>
			</template>
			<template v-if="details.status == 5 || details.status == 8">
				<view class="btn on" @click.stop="handleCancelRefund(details.orderRefund.id)">取消退款</view>
			</template>
			<template v-if="details.orderRefund.status == 1">
				<view class="btn on" @click.stop="express(details.id)">填写单号</view>
			</template>
		</view>
		<view class="place"></view>
		<payment-method :submitFlag="submitFlag" :orderId="details.id" :isPopupShow="isPopupShow"
			:payMethod.sync="payMethod" @togglePopup="togglePopup" @handleConfirmPay="handleConfirmPay">
		</payment-method>
		<cancel-reason :isPopupShow="isReasonShow" :orderId="orderId" @togglePopup="toggleReasonPopup"
			@handleSure="handleSureCancle"></cancel-reason>
	</view>
</template>

<script>
	import {
		frontDetail,
		confirmPay,
		cancelOrder
	} from '@/api/order.js'
	import payment from '@/mixins/payment.js'
	import handle from '@/mixins/orderHandle.js'
	import paymentMethod from '@/components/payment-method/index.vue'
	import {
		formatDate
	} from '@/utils/util.js'
	import CancelReason from '@/components/CancelReason/CancelReason.vue'
	export default {
		mixins: [payment, handle],
		components: {
			paymentMethod,
			CancelReason
		},
		data() {
			return {
				tabbarBottom: 0,
				isReasonShow: false,
				timer: null,
				plusTime: {
					h: '00',
					m: '00',
					s: '00'
				},
				details: {},
				isPopupShow: false,
				payMethod: '',
				submitFlag: false,
				descList: [
					'剩23时59分自动关闭', // 待支付0
					'已准备开始配送，请您耐心等待', // 待发货1
					'已开始配送，请您耐心等待', // 待收货2
					'感谢您的购买', // 待评价3
					'交易关闭，期待您下次购买', // 交易关闭4
					'正在退款中，期待您下次购买', // 正在退款5
					'订单已取消，期待您下次购买', // 交易取消6
					'订单已退款，期待您下次购买', // 已退款7
					'正在退货中，期待您下次购买', // 正在退货中8
					'订单已退货，期待您下次购买', // 已退货9
					'订单已完成，感谢您的购买', // 已完成10
				],
				orderId: ''
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
		},
		onShow() {
			const fixSize = () => {
				const {
					safeAreaInsets,
					platform
				} = uni.getSystemInfoSync()

				console.log(uni.getSystemInfoSync())
				let barpx = 0
				if (safeAreaInsets && safeAreaInsets.bottom) {
					if (safeAreaInsets.bottom > 0) {
						barpx = safeAreaInsets.bottom
					} else {
						barpx = 0
					}
				}
				if (platform == "devtools") {
					this.tabbarBottom = barpx || 6
				} else if (platform == "ios") {
					this.tabbarBottom = barpx || 30
				} else if (platform == "android") {
					this.tabbarBottom = barpx || 30
				}
			}


			fixSize()
			this.getDetails()
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			getDetails() {
				const data = {
					orderId: this.orderId
				}
				frontDetail(data).then(respanse => {
					this.details = respanse.result
					if (this.details.status == 0) {
						this.countDown()
					}
				})
			},

			// 取消退款退货申请回调
			cancelRefundCallback() {
				this.getDetails()
			},

			// 取消订单回调
			// cancelOrderCallback() {
			// 	this.getDetails()
			// },
			toggleReasonPopup() {
				this.isReasonShow = !this.isReasonShow
			},

			handleSureCancle(reason, orderId) {
				cancelOrder({
					orderId,
					cancelReason: reason
				}).then(respanse => {
					this.isReasonShow = false
					this.getDetails()
				})
			},

			// 取消订单
			handleCancelOrder(orderId) {
				const that = this
				that.orderId = orderId
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							that.isReasonShow = true
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 确认收货回调
			confirmGetCallback() {
				this.getDetails()
			},

			// 去付款(选择支付方式)
			togglePopup() {
				this.isPopupShow = !this.isPopupShow
			},

			// 去付款
			handleConfirmPay() {
				if (!this.payMethod) {
					uni.showToast({
						title: '请选择支付方式！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const data = {
					orderId: this.details.id,
					payMethod: this.payMethod
				}
				this.submitFlag = true
				confirmPay(data).then(respanse => {
					this.createOrderDetails = respanse.result
					if (this.productType == 1) {
						this.payment(2, true) // 2积分类型区分支付成功页面
					} else if (this.productType == 5) {
						this.payment(1, true, true) // 自助机商品
					} else {
						this.payment(1, true)
					}
					this.submitFlag = false
				}).catch(err => {
					this.submitFlag = false
				})
			},

			// 复制
			copy() {
				const that = this
				uni.setClipboardData({
					data: that.details.orderNo,
					success: function() {
						uni.showToast({
							title: '复制成功！',
							icon: 'success',
							duration: 2000
						})
					}
				});
			},
			copy1() {
				const that = this
				uni.setClipboardData({
					data: that.details.express,
					success: function() {
						uni.showToast({
							title: '复制成功！',
							icon: 'success',
							duration: 2000
						})
					}
				});
			},
			countDown() {
				const that = this
				let currentPlusTime = that.details.plusTime
				clearInterval(this.timer)
				this.timer = setInterval(function() {
					console.log('cut')
					currentPlusTime = currentPlusTime - 1000
					if (currentPlusTime > 0) {
						that.plusTime.h = formatDate(new Date(currentPlusTime), 'hh')
						that.plusTime.m = formatDate(new Date(currentPlusTime), 'mm')
						that.plusTime.s = formatDate(new Date(currentPlusTime), 'ss')
					} else {
						that.plusTime.h = '00'
						that.plusTime.m = '00'
						that.plusTime.s = '00'
						clearInterval(that.timer)
						cancelOrder({
							orderId: that.details.id
						}).then(respanse => {
							that.cancelOrderCallback()
						})
						return
					}

				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-wrapper {
		padding: 37rpx 0 0 83rpx;
		width: 100%;
		height: 183rpx;
		box-sizing: border-box;
		background: linear-gradient(-90deg, #ED602B, #F19136);

		.status {
			line-height: 42rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
		}

		.desc {
			margin-top: 9rpx;
			line-height: 36rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.address-wrapper {
		position: relative;
		padding: 34rpx 22rpx 0 25rpx;
		margin: -38rpx 25rpx 0;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;

		.address {
			line-height: 46rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
		}

		.name-tel {
			padding-bottom: 34rpx;
			margin-top: 16rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #666666;
		}

		.time-wrapper {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding-right: 34rpx;
			line-height: 117rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #000000;
			}

			.time {
				font-size: 28rpx;
				color: #000000;
			}
		}
	}

	.product-wrapper {
		padding-top: 35rpx;
		margin: 20rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;

		.store-infor {
			display: flex;
			padding: 0 23rpx 22rpx 32rpx;

			.icon {
				width: 34rpx;
				height: 35rpx;
			}

			.name {
				flex: 1;
				overflow: hidden;
				margin-left: 16rpx;
				line-height: 35rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.product-list {
			padding-bottom: 22rpx;
		}

		.product-item {
			display: flex;
			padding: 10rpx 23rpx 10rpx 32rpx;

			.img {
				width: 156rpx;
				height: 156rpx;
				border-radius: 10rpx;
				background-color: #F5F5F5;
			}

			.text {
				flex: 1;
				padding-top: 7rpx;
				margin-left: 39rpx;
				overflow: hidden;

				.name {
					line-height: 38rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #080808;
				}

				.specifications {
					margin-top: 6rpx;
					line-height: 32rpx;
					font-size: 22rpx;
					color: #818181;
				}

				.num {
					margin-top: 19rpx;
					line-height: 38rpx;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.price {
				line-height: 38rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #080808;
			}
		}
	}

	.total-amount {
		position: relative;
		padding-right: 23rpx;
		line-height: 100rpx;
		text-align: right;
		font-size: 30rpx;
		font-weight: bold;
		color: #040404;
	}

	.order-infor-wrapper {
		margin: 0 25rpx;

		.title {
			padding-left: 25rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.order-infor {
			background: #FFFFFF;
			border-radius: 10rpx;

			.infor-item {
				position: relative;
				display: flex;
				line-height: 87rpx;
				padding-left: 26rpx;

				&::after {
					left: 25rpx;
					right: 25rpx;
				}

				&:last-child::after {
					display: none;
				}

				.titl {
					font-size: 28rpx;
					color: #040404;
				}

				.con {
					flex: 1;
					text-align: right;
					margin-right: 25rpx;
					font-size: 28rpx;
					color: #666666;
				}

				.btn {
					padding: 0 25rpx 0 26rpx;
					font-size: 28rpx;
					color: #ED602B;
				}
			}
		}
	}

	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.bottom-menu {
			padding-bottom: env(safe-area-inset-bottom) !important;
			padding-bottom: constant(safe-area-inset-bottom) !important;
		}
	}

	.bottom-menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		flex-direction: row-reverse;
		padding: 12rpx 25rpx;
		background-color: #fff;

		.btn {
			margin-left: 22rpx;
			width: 207rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 30rpx;
			color: #EB6D36;

			border-radius: 38rpx;
			border: 1px solid #E85749;
			box-sizing: border-box;

			&.on {
				background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
				color: #fff;
				border: none;
			}
		}
	}

	.place {
		height: 120rpx;
		visibility: hidden;
	}
</style>
